<template>
	<view class="container" v-if="images.length">
		<view class="container__title">图片</view>
		<view class="container__img">
			<image :src="item" mode="" v-for="(item,index) in images" @click="preview(index)"></image>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import {formatImg} from '@/common/custom_util.js'
	
	export default {
		data() {
			return {
				images: []
			}
		},
		props: {
			process: {
				type: Object,
				default: () => {}
			}
		},
		watch: {
			process: {
				deep: true,
				immediate: true,
				handler() {
					if(Object.keys(this.process).length) {
						this.$nextTick(function(){
							this.getInsFlowUpLoadList();
						})
						
					}
				}
			}
		},
		methods: {
			/**
			 * 获取流程上传的图片文件
			 */
			getInsFlowUpLoadList() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getInsFlowUpLoadList',
						apiparam: {
							insflowid: this.process.InsFlowId,
						},
						success(res) {
							if(!res.length) return
							that.images = res.map(item => {
								return formatImg(item.FilePath)
							})
						}
					})
				})
			},
			/**
			 * 图片预览
			 * @param {Object} i  索引
			 */
			preview(i) {
				uni.previewImage({
					current: i,
					urls: this.images
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #fff;
		padding-left: 20rpx;
		
		&__title {
			font-size: 27rpx;
			color: #aaa;
		}
		
		&__img {
			height: 120rpx;
			overflow-x: scroll;
			display: flex;
			
			image {
				width: 100rpx;
				height: 100rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
		}
	}
</style>
